import { createRouter, createWebHistory, RouteRecordRaw, RouterView } from "vue-router";
import LoginPage from '@/views/Login/Login.vue'
import Layout from '@/layout/Layout.vue'
import NotFound from '@/views/NotFound/NotFound.vue'
import Registration from '@/views/Registration/Registration.vue'
import Statistics from '@/views/Statistics/Statistics.vue'
import pinia from '@/store/store'
import HomePage from '@/views/HomePage/HomePage.vue'
import Test from '@/views/test/index.vue'
import Test1 from '@/views/test/children/test1.vue'
import Test2 from '@/views/test/children/test2.vue'
import { useMainStore } from "@/store/index"
import { showTip } from "@/utils";
import { storeToRefs } from "pinia";
const mainStore = useMainStore(pinia);
const { path } = storeToRefs(mainStore); //解构并且可以响应式
/** 路由列表  注意，其中的name项将作为面包屑展示在页面上 */
const routes: RouteRecordRaw[] = [
    {
        path: "/Layout",
        name: 'layout',
        component: Layout,
        children: [
            {
                path: "/home",
                name: '主页',
                component: HomePage
            },
            { //测试嵌套路由的情况
                path: "/test",
                name: '测试嵌套路由',
                component: RouterView, //因为子页面全部页面都基于这个，想嵌套路由就需要继续放router-view
                children: [
                    {
                        path: '/test',
                        name: '嵌套路由首页',
                        component: Test
                    },
                    {
                        path: '/test/test1',
                        name: '嵌套路由第一个',
                        component: Test1
                    },
                    {
                        path: '/test/test1/test2',
                        name: '嵌套路由第二个',
                        component: Test2
                    },
                ]

            },
            {
                path: "/registration",
                name: '报障登记列表',
                component: Registration
            },
            {
                path: "/Statistics",
                name: '巡检表统计',
                component: Statistics
            },
        ]
    },
    {
        path: "/notFound",
        name: "404",
        component: NotFound,
    },
    {
        path: "/",
        name: "登录页",
        component: LoginPage,
    },
];
/** 路由器 */
const router = createRouter({
    history: createWebHistory('/admin'), //整个项目需要运行在 /admin 路径下
    routes,
});
//路由守卫 变化前 
router.beforeEach((to, from, next) => {
    if (to.path == '/') next();
    else if (to.name == '404') next();
    else if (to.matched.length === 0) {  //如果未匹配到路由
        console.log('未匹配到路由，来自', from.path, '去往', to.path);
        next({ name: '404' }) //去往404页面
    }
    // else if (!localStorage.getItem('token')) {//没有token就去登录   //完成登录模块的API对接后，请把此处解开
    //     showTip('请先登录！', "error")
    //     next('/')
    // } 
    else next()  //如果匹配到正确跳转
    path.value = to.path//把当前路径存储到pinia中，方便侧边栏的自动配置
})
export default router;

//#region 下面是根据路由配置自动生成面包屑配置。
/**面包屑的类型  键为路由路径，值为想展示的名称 */
interface bread { [key: string]: string }
/**creatBread - 根据路由，创建面包屑列表
 * @param routeList 路由列表。初始时为整个路由，会不断递归子路由数组 
 * @param bread 初始时可以不传递。在递归时不断更新这个对象，最终导出
 * @returns 导出 bread 面包屑列表
 */
/** 面包屑列表。 主要用处是面包屑中根据路径判断展示的名字 */
export const bread: bread = (function creatBread(routeList: RouteRecordRaw[], bread: bread = {}): bread {
    routeList.map((k) => {
        bread[k.path] = k.name as string || '未定义'
        if (k.children && k.children.length) {//有子路由的话就接着遍历
            creatBread(k.children, bread)
        }
    })
    return bread
})(routes)
//#endregion
